<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header-section">
			<uni-icons type="back" size="30" @click="goBack"></uni-icons>
			<view class="title">宠物详情</view>
			<uni-icons type="search" size="30" @click="goSearch"></uni-icons>
		</view>
		<swiper indicator-dots="true" indicator-color="#FCF3F3" indicator-active-color="#EC3A40" interval="3500"
			duration="500" :autoplay="!autoplay" class='swiper-view'>

			<swiper-item class="swiper-video" v-if="detailData.productVideo">

				<view>
					<view style="position: relative;">
						<video v-if="detailData.productVideo" id="myVideo" ref="myVideoRef"
							:poster="baseUrl+detailData.swiperList[0]" :src="detailData.productVideo"
							:show-center-play-btn="false" :controls="false" object-fit="cover" :show-play-btn="true"
							@play.stop="playFun()" @pause.stop="pauseFun()" @ended.stop="endedFun()">
						</video>
						<view class="video-img" @tap.stop="videoPlay()" v-if="startVideo">
							<image src="this.pet.petLogo" mode=""></image>
						</view>
					</view>

				</view>
			</swiper-item>

			<swiper-item class="swiper-img" v-for="(item,index) in detailData.swiperList" :key="index">
				<image mode='scaleToFill' :src="baseUrl+item"></image>
			</swiper-item>
		</swiper>

		<!-- 宠物信息 -->
		<view class="product-info">
			<text class="product-name">{{ pet.petName }}</text>
			<view class="product-price-stock">
				<text class="product-price">¥{{ pet.petPrice }}</text>
			</view>
			<view class="product-description">
				<text>宠物介绍：{{ pet.petDescription }}</text>
				<text>物种：{{ pet.petBreed }}</text>
				<text>品种：{{ pet.petSpecies }}</text>
				<text>年龄：{{ pet.petAge }}岁</text>
				<text>性别：{{ pet.petGender }}</text>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="footer">
			<view class="operation-buttons">
				<view class="theButton" @click="goToShopPage(pet.storeId)">
					<view class="iconfont icon-dianpu text-black icon"></view>
					<text class="text">店铺</text>
				</view>
				<view class="theButton">
					<view class="iconfont icon-kefu text-black icon"></view>
					<text class="text">客服</text>
				</view>
			</view>
			<view class="action-buttons">
				<button class="buy-now" @click="showAppointment">预约购买</button>
			</view>
		</view>
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content">
				<text class="text-xl text-bold">请确定预约信息</text>
				<uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" />
				<view class="product-description">
					<text>商店名：{{ shopInfo.storeName }}</text>
					<text>商店地址：{{ shopInfo.storeAddress }}</text>
				</view>
			</view>
			<view class="button-container">
				<button class="mini-button cancel-button" @click="closePopup">取消</button>
				<button class="mini-button confirm-button" @click="onConfirm">确认</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		AddItemToCart
	} from '../../../api/cart';
	import {
		getPetDetail,
		getPetSpecifications
	} from '@/api/login.js';
	import {
		getpetsByPetId,
		updatePet
	} from '../../../api/pets';
	import config from '@/config'
	import {
		getShopById
	} from '../../../api/shop';
	import {
		addAppointment
	} from '../../../api/appointment';
	const baseUrl = config.baseUrl;

	export default {
		data() {
			return {
				single: '',
				baseUrl: '',
				petId: '',
				pet: {},
				petImages: [],
				petSpecifications: [],
				shopInfo: {},
				actionType: '', // 操作类型，'cart' 表示加入购物车，'buy' 表示立即购买
				// 商品详情详情数据
				detailData: {
					productVideo: '',
					swiperList: [],
				},
				videoplayObj: {}, //video对象
				contimg: false, // 是否正在播放视频
				startVideo: true, //中间播放按钮
				autoplay: false, //是否自动轮播
				current: 0,
				mode: 'round',
				datetimesingle: '',
				appointmentInfo: {
					userId: '',
					storeId: '',
					petId: '',
					serviceName: '',
					description: '',
					servicePrice: '',
					appointmentTime: '',
					serviceStatus: '',
				}
			};
		},
		created() {
			this.baseUrl = baseUrl;
			this.fetchPetDetail(this.petId);
			this.getUserInfo();
		},
		onLoad() {
			this.videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向video
		},
		mounted() {
			this.videoplayObj = wx.createVideoContext('myVideo')
		},
		methods: {
			videoPlay() {
				console.log('videoPlay')
				this.startVideo = false
				this.videoplayObj.play()
			},
			playFun() {
				console.log('playFun')
				this.startVideo = false
				this.contimg = true
				if (this.autoplay == false) {
					this.autoplay = true;
				}
			},
			pauseFun() {
				this.startVideo = true
				this.contimg = false
				if (this.autoplay == true) {
					this.autoplay = false;
				}
			},
			endedFun() {
				this.startVideo = true
				this.contimg = false
				if (this.autoplay == true) {
					this.autoplay = false;
				}
			},
			quanbu() {
				console.log('quanbu')
				if (this.contimg) {
					console.log('全屏')
					this.videoFullScreenShow = true;
				} else {
					console.log('直接播放')
					this.videoplayObj.play()
				}
			},
			selectStyle(index) {
				this.dotsStyles = this.dotStyle[index]
				this.styleIndex = index
			},
			selectMode(mode, index) {
				this.mode = mode
				this.modeIndex = index
				this.styleIndex = -1
				this.dotsStyles = this.dotStyle[0]
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			onBanner(index) {
				console.log(22222, index);
			},
			goBack() {
				uni.navigateBack();
			},
			goSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				});
			},
			fetchPetDetail(petId) {
				getpetsByPetId(petId).then(response => {
					if (response.code === 200) {
						this.pet = response.data;
						console.log(this.pet);
						this.petImages = this.pet.petLogo;
						this.detailData.swiperList = [];
						this.detailData.swiperList.push(this.petImages);
						this.detailData.productVideo = baseUrl + this.pet.videoUrl;
						this.getShopInfo(this.pet.storeId);
					}
				}).catch(error => {
					console.error(error);
				});
			},
			getShopInfo(storeId) {
				getShopById(storeId).then(res => {
					console.log(res);
					this.shopInfo = res.data;

				})
			},
			getUserInfo() {
				this.$store.dispatch('GetInfo').then(res => {
					this.appointmentInfo.userId = res.appUser.userId;
				})
			},
			onConfirm() {
				this.appointmentInfo.petId = this.petId;
				this.appointmentInfo.storeId = this.shopInfo.storeId;
				this.appointmentInfo.serviceName = "预约购买宠物";
				this.appointmentInfo.description = "预约购买宠物";
				this.appointmentInfo.servicePrice = this.pet.petPrice;
				this.appointmentInfo.appointmentTime = this.datetimesingle;
				this.appointmentInfo.serviceStatus = "已预约";
				if (this.pet.petStatus == "未出售") {
					updatePet(this.pet).then(res => {
						this.pet.petStatus = "已预约";
						console.log(res);
					})
					addAppointment(this.appointmentInfo).then(res => {
						console.log(res);
					})
				} else{
					uni.showModal({
						title: '提示',
						content: '该宠物已被预约',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
				this.$refs.popup.close();
			},
			addToCart(spec) {
				console.log('Adding to cart:', spec);
				// 实现加入购物车的具体逻辑
				// 可以将宠物ID、规格ID等发送到后端接口
				this.item.itemStatus = "有效";
				console.log(this.item);
				AddItemToCart(this.item).then(res => {
					console.log(res);
				});
			},
			buyNow(spec) {
				console.log('Buying now:', spec);
				// 实现立即购买的具体逻辑
				// 可以将宠物ID、规格ID等发送到后端接口，并跳转到支付页面等
				console.log(this.item);
			},
			closePopup() {
				this.$refs.popup.close();
			},
			showAppointment() {
				this.$refs.popup.open();
			},
			change(e) {
				this.single = e
				console.log('change事件:', this.single = e);
			},
			changeLog(e) {
				console.log('change事件:', e);
			},
			// 跳转到商店页面
			goToShopPage(storeId) {
			  uni.navigateTo({
			    url: `/pages/service/shopDetail?storeId=${storeId}`
			  });
			},
		},
		onLoad(options) {
			if (options.petId) {
				this.petId = options.petId;
				this.fetchPetDetail(this.petId);
				this.item.productCnt = this.selectedQuantity;
			}
			this.baseUrl = baseUrl;
			this.$store.dispatch('GetInfo').then(res => {
				this.item.userId = res.appUser.userId;
				this.item.cartId = res.appUser.userId;
			});
		},
	};
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		padding-bottom: 60px;
	}

	.header-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		background-color: #ffffff;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	.header-section .title {
		font-size: 18px;
		font-weight: bold;
		color: #333333;
	}

	.swiper-container {
		height: 300px;
	}

	.product-info {
		padding: 10px;
		background-color: #ffffff;
	}

	.product-name {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		margin-bottom: 10px;
	}

	.product-price-stock {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.product-price {
		font-size: 16px;
		color: #ff0000;
	}

	.product-description {
		font-size: 14px;
		color: #666666;
		margin-bottom: 10px;
	}

	.product-type {
		font-size: 14px;
		color: #666666;
		margin-bottom: 10px;
	}

	.store-id {
		font-size: 14px;
		color: #666666;
		margin-bottom: 10px;
	}

	.comments-section {
		padding: 10px;
		background-color: #ffffff;
		margin-top: 10px;
	}

	.comments-title {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		margin-bottom: 10px;
	}

	.comment-item {
		display: flex;
		margin-bottom: 10px;
	}

	.comment-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.comment-content {
		flex: 1;
	}

	.comment-username {
		font-size: 14px;
		font-weight: bold;
		color: #333333;
		margin-bottom: 5px;
	}

	.comment-rating {
		margin-bottom: 5px;
	}

	.comment-text {
		font-size: 14px;
		color: #666666;
	}

	.footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		padding: 10px;
		box-shadow: 0px -1px 5px 0px rgba(0, 0, 0, 0.1);
	}

	.operation-buttons {
		display: flex;
		align-items: center;
	}

	.theButton {
		display: flex;
		align-items: center;
		margin-right: 20px;
	}

	.icon {
		font-size: 22px;
		color: #333333;
		margin-right: 5px;
	}

	.text {
		font-size: 14px;
		color: #333333;
	}

	.action-buttons {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}

	.add-to-cart,
	.buy-now {
		padding: 10px 20px;
		border: none;
		border-radius: 4px;
		color: #ffffff;
		font-size: 14px;
		cursor: pointer;
	}

	.add-to-cart {
		background-color: #ff9900;
		margin-right: 10px;
	}

	.buy-now {
		background-color: #ff0000;
	}

	/* 规格选择弹窗样式 */
	.popup-content {
		padding: 20px;
		background-color: #ffffff;
	}

	.popup-title {
		font-size: 18px;
		font-weight: bold;
		color: #333333;
		margin-bottom: 10px;
	}

	.spec-buttons {
		display: flex;
		flex-wrap: wrap;
	}

	.spec-item-container {
		margin-right: 10px;
		margin-bottom: 10px;
	}

	.spec-item-popup {
		padding: 8px 16px;
		border: 1px solid #dddddd;
		border-radius: 4px;
		color: #333333;
		font-size: 14px;
		cursor: pointer;
	}

	.uni-active {
		background-color: #ff9900;
		color: #ffffff;
	}

	.quantity-selector {
		display: flex;
		align-items: center;
		margin-top: 10px;
		margin-bottom: 20px;
	}

	.quantity-selector text {
		font-size: 14px;
		color: #666666;
		margin-right: 10px;
	}

	.quantity-input {
		width: 60px;
		height: 30px;
		border: 1px solid #dddddd;
		border-radius: 4px;
		padding: 0 10px;
		font-size: 14px;
	}

	.spec-value {
		font-size: 14px;
		color: #666666;
		margin-bottom: 10px;
	}

	.actions {
		display: flex;
		justify-content: flex-end;
	}

	.cancel,
	.confirm {
		padding: 8px 16px;
		border: none;
		border-radius: 4px;
		font-size: 14px;
		cursor: pointer;
	}

	.cancel {
		background-color: #dddddd;
		color: #333333;
		margin-right: 10px;
	}

	.confirm {
		background-color: #ff9900;
		color: #ffffff;
	}

	.swiper-view {
		width: 750rpx;
		height: 750rpx;

		.swiper-img {
			image {
				width: 750rpx;
				height: 750rpx;
			}
		}


	}

	.swiper-video {
		video {
			width: 100%;
			height: 750rpx;
		}

		/* 自定义按钮 */
		.video-img {
			display: inline-block;
			width: 90upx;
			height: 90upx;
			position: absolute;
			bottom: 0;
			left: 50%;
			top: 50%;
			transform: translateX(-50%) translateY(-50%);

			image {
				width: 90upx;
				height: 90upx;
				z-index: 999;
				border: 2px solid #FFFFFF;
				border-radius: 50%;
			}
		}
	}

	.product-description {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
		margin-top: 10px;
	}

	.product-description text {
		display: block;
		margin-bottom: 5px;
	}

	.popup-content {
		align-items: center;
		justify-content: center;
		padding: 15px;
		width: 300px;
		height: 250px;
		background-color: #fff;
	}

	.mini-button {
		padding: 8px 16px;
		/* 可根据需要调整内边距 */
		font-size: 14px;
		/* 字体大小 */
		border-radius: 4px;
		/* 按钮圆角 */
		border: 1px solid #ddd;
		/* 边框样式 */
		background-color: #ffffff;
		/* 背景颜色 */
		color: #333;
		/* 文字颜色 */
	}

	.cancel-button {
		background-color: #f5f5f5;
		/* 取消按钮的背景颜色 */
	}

	.confirm-button {
		background-color: #2196f3;
		/* 确认按钮的背景颜色 */
		color: #ffffff;
		/* 确认按钮的文字颜色 */
	}

	.button-container {
		display: flex;
		justify-content: space-between;
		/* 水平排列按钮，并留出空间 */
		margin: 10px;
		/* 可根据需要添加外边距 */
	}
</style>